<div ng-controller="Fabric.TestController">

  <div class="row-fluid">
    <h3>Profile Link</h3>
    <p>A simple widget that automatically links to a profile given just the profile name, or can link to a file inside a profile</p>
    <script type="text/ng-template" id="profileLinkTemplate">
      <ul>
        <li>
          <a fabric-profile-link="default">Click me! (use the back button to get back)</a>
        </li>
        <li>
          <a fabric-profile-link="default" file="io.fabric8.agent.properties">Me too!</a>
        </li>
        <li>
          <a href="http://www.google.com" fabric-profile-link="hawtio">Hey, this link's been overwritten!</a>
        </li>
      </ul>
    </script>
    <div hawtio-editor="profileLink" mode="html"></div>
    <div class="directive-example">
      <div compile="profileLink"></div>
    </div>


  </div>


  <div class="row-fluid">
    <h3>Container List</h3>
    <p>A widget to display a list of containers</p>
    <script type="text/ng-template" id="containerListTemplate">
      <div fabric-container-list></div>
    </script>
    <div hawtio-editor="containerList" mode="html"></div>
    <div class="directive-example">
      <div compile="containerList"></div>
    </div>
  </div>

  <!--
<div class="row-fluid">

<div class="span3">
<p>Maven completion</p>
<p>Model: {{someUri}}</p>
<p>uriParts</p>
<ol>
  <li ng-repeat="part in uriParts">{{part}}</li>
</ol>
<input class="input-xlarge" type="text" ng-model="someUri" typeahead="name for name in doCompletionMaven($viewValue) | filter:$viewValue" typeahead-wait-ms="200">
</div>
<div class="span1">

</div>
<div class="span3">
<p>Fabric completion</p>
<p>Model: {{someUri2}}</p>
<p>uriParts</p>
<ol>
  <li ng-repeat="part in uriParts2">{{part}}</li>
</ol>
<input class="input-xlarge" type="text" ng-model="someUri2" typeahead="name for name in doCompletionFabric($viewValue) | filter:$viewValue" typeahead-wait-ms="200">
</div>
</div>
  -->

  <div class="row-fluid">
    <h3>Version Selector</h3>
    <p>A simple drop-down selector for a fabric version</p>

    <script type="text/ng-template" id="versionSelectorTemplate">
      <div fabric-version-selector='version'></div>
    </script>
    <div hawtio-editor="versionSelector" mode="html"></div>
    <div class="directive-example">
      <div compile="versionSelector"></div>
    </div>
    <p>Selected version : {{version}}</p>

  </div>

  <div class="row-fluid">

    <h3>Profile Selector</h3>
    <p>Use to display a list of fabric profiles, includes a filter and selection</p>
    <p>It's possible to only show some profiles, like:</p>
    <script type="text/ng-template" id="profile-includes">
      <div fabric-profile-selector='osp' version-id='vid' included-profiles="someProfiles"></div>
    </script>
    <div hawtio-editor="profileIncludes" mode="html"></div>
    <div class="directive-example">
      <div compile="profileIncludes"></div>
    </div>
    <p>The selected profiles:</p>
    <div hawtio-editor="selectedProfilesString" mode="javascript"></div>

    <p></p>

    <script type="text/ng-template" id="profile-excludes">
      <div fabric-profile-selector='osp' version-id='vid' excluded-profiles="someProfiles"></div>
    </script>
    <p>Or exclude some profiles:</p>
    <div hawtio-editor="profileExcludes" mode="html"></div>
    <div class="directive-example">
      <div compile="profileExcludes"></div>
    </div>


    <!--
    <div class="span3">
      <div fabric-profile-selector='osp' version-id='vid' included-profiles="someProfiles"></div>
    </div>
    <div class="span3">
      <div fabric-profile-selector='osp' version-id='vid' excluded-profiles="someProfiles"></div>
    </div>
    -->
  </div>

  <hr>

  <!--
  <div class="row-fluid">
    <div class="span3">
      <div fabric-version-selector='version'></div>
      <div fabric-profile-selector='selectedProfiles' version-id='versionId'></div>
    </div>
    <div class="span3">
      <p>Selected version: {{version.id}}</p>
      <p>Selected profiles:
        <ul>
          <li ng-repeat="profile in selectedProfiles">{{profile.id}}</li>
        </ul>
      </p>
    </div>
  </div>
  -->


</div>
